//每次进入页面 刷新页面执行
$(function () {
    initList()   //初始化数据列表
    //初始化数据列表
    function initList(){
        $.ajax({
            'type': 'get',
            url: '/books',
            dataType: 'json',
            success: function (data) {
                let html = template('indexTpl', {list: data})  //模板id和数据   返回的是渲染后的页面内容
                //必须在渲染完成内容之后才可以操作dom标签
                let dataList = $("#dataList")
                dataList.html(html)

                dataList.find("tr").each(function (index, element) {
                    //console.log($(element))    //一个element是一个数组
                    let id = $(element).find('td:eq(0)').text()  //获取下标为0的td, 其text就是id值
                    let td = $(element).find('td:eq(5)')    //element是dom对象,需要$()包裹转化为jquery对象  找到下标为5的td

                    td.find("a:eq(0)").click(function () {
                        editBook(id)  //编辑
                    })
                    //绑定删除图书的单击事件
                    td.find("a:eq(1)").click(function () {
                        deleteBook(id)  //删除
                    })
                })
            }
        })
    }
    addBook()  //绑定添加图书事件

    //添加图书事件
    function addBook() {
        $("#addBookAId").click(function () {
            let data = {id: "", name: "", author: "", category: "", description: ""}  //模板需要这几个字段, 但是添加图书不需要, 所以还是得加上
            let formHtml = template('formTpl', data)  //模板id和数据   返回的是渲染后的页面内容
            let indexForm = layer.open({
                type: 1,
                title: "添加图书",
                content: formHtml,
                area: ['600px', '400px'], //宽高
            })
            //给提交按钮添加点击事件
            $('form').eq(0).find('input[type=button]').click(function () {
                let data = $('form').eq(0).serialize();
                $.ajax({
                    type: 'post',
                    url: '/books/book',
                    data: data,
                    dataType: 'json',
                    id: "addBookFormLayer",
                    success: function (data) {
                        if(data.flag === 1){
                            initList()
                            layer.close(indexForm)
                            layer.msg('添加图书成功!',{
                                icon: 6,
                                time: 1000,
                                offset: 'auto'
                            })
                        }
                    }
                })
            })
        })
    }

    //编辑图书
    function editBook(id) {
        $.ajax({
            type: 'get',
            url: '/books/book/' + id,
            dataType: 'json',
            success: function (data) {
                console.log(data)
                let formHtml = template('formTpl', data)  //模板id和数据   返回的是渲染后的页面内容
                let indexForm = layer.open({
                    type: 1,
                    title: "编辑图书信息",
                    content: formHtml,
                    area: ['600px', '400px'], //宽高
                    id: "editBookFormLayer"
                })
                //给提交按钮添加点击事件
                $('form').eq(0).find('input[type=button]').click(function () {
                    let data = $('form').eq(0).serialize();
                    $.ajax({
                        type: 'put',
                        url: '/books/book',
                        data: data,
                        dataType: 'json',
                        success: function (data) {
                            if(data.flag === 1){
                                initList()
                                layer.close(indexForm)
                                layer.msg('修改图书成功!',{
                                    icon: 6,
                                    time: 1000,
                                    offset: 'auto'
                                })
                            }
                        }
                    })
                })
            }
        })
    }

    //删除图书
    function deleteBook(id) {
        layer.confirm('确定要删除么?',  {icon: 3, title: '删除'}, function (index) {
            $.ajax({
                type: 'delete',
                url: '/books/book/' + id,
                dataType: 'json',
                success: function (data) {
                    //删除图书信息之后重新渲染数据列表
                    if(data.flag === 1){
                        layer.close(index);
                        initList()
                        layer.msg('删除图书成功!',{
                            icon: 6,
                            time: 1000,
                            offset: 'auto'
                        })
                    }
                }
            })
        })
    }
})